@extends('Admin.base')
@section('css')
    <link rel="stylesheet" href="/Admin/layuiadmin/style/template.css" media="all">
    <link rel="stylesheet" href="/Admin/layuiadmin/css/extend/formSelects-v4.css" media="all">
@endsection
@section('style')
    <style>
        .cmdlist-container{margin-bottom: 20px;}

        .cmdlist-bottom{
            background-color: rgba(0, 0, 0, .6);
            filter: progid:DXImageTransform.Microsoft.Gradient(startColorStr=#40000000,endColorStr=#40000000);
            color:#fff;
            width: 100%;
            height:0;
            position: absolute;
            bottom: 0px;
            left: 0px;
            vertical-align:middle;
            text-align: center;
            overflow: hidden;
        }
        .cmdlist-container .banner-show:hover .cmdlist-bottom{
            height: 10px;
        }

        .cmdlist-mid{
            display:inline;
            line-height:60px
        }
    </style>
@endsection
@section('content')
    <div class="layui-card">
        <form class="layui-form" id="layui-form" action="{{url('admin/activeBanner/')}}{{isset($data) ? '/'.$data->id : ''}}" method="post">
        <div class="layui-card-header layuiadmin-card-header-auto">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>{{$data->remark ?? '编辑活动'}}</legend>
            </fieldset>
        </div>
        <div class="layui-card-body layui-row">
            <div class="layui-row layui-col-space30">
                <div class="layui-col-md4 layui-col-sm4">
                    <div class="cmdlist-container">
                        <div class="banner-show" style="position: relative;">
                            <div style="overflow: hidden;">
                                <a href="{{$data->photo ?? ''}}" target="_blank">
                                    <img src="{{$data->photo ?? ''}}">
                                </a>
                            </div>
                            <div class="cmdlist-bottom">
                                <div class="layui-row cmdlist-mid">
                                    <button type="button" style="width: 60%;" class="layui-btn banner-upload-btn">上传图片</button>
                                </div>
                            </div>
                        </div>
                        <div>
                            <a href="javascript:;">
                                <div class="cmdlist-text">
                                    <input type="hidden" name="id" value="{{$data->id ?? ''}}">
                                    @method('PUT')
                                    @if(in_array($data->id,[9,10,11]))
                                        <input type="hidden" name="status" value="1">
                                    @else
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">状态</label>
                                        <div class="layui-input-block">
                                            <input type="checkbox" name="status" lay-skin="switch" lay-text="展示|关闭" value="1" {{(isset($data) && $data->status == \App\Models\Banner::statusTrue) ? 'checked' : ''}}>
                                        </div>
                                    </div>
                                    @endif
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">活动名称</label>
                                        <div class="layui-input-block">
                                            <input type="text" name="remark" class="layui-input" value="{{$data->remark ?? ''}}" lay-verify="required">
                                        </div>
                                    </div>
                                    <div class="layui-form-item ">
                                        <label class="layui-form-label">跳转地址</label>
                                        <div class="layui-input-block">
                                            <select name="jump_url" xm-select="jump_url" xm-select-radio xm-select-search="">
                                                <option value="">{{$data->jump_url ?? '选择跳转地址'}}</option>
                                            </select>
                                            <input type="hidden" name="goods_id" id="goods_id" value="0" readonly>
                                            <script type="text/html" id="photoTpl">
                                                <a href="@{{ d.photo }}" target="_blank">
                                                    <img style="display: inline-block; max-width:200px; " src="@{{ d.photo }}" alt="">
                                                </a>
                                            </script>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-form-item layui-col-md6">
                <div class="">
                    <a class="layui-btn" href="{{route('activeBanner.index')}}" >返回</a>
                    <button type="button" class="layui-btn" id="save-btn" style="display:none;">保存</button>
                    <button type="submit" class="layui-btn" lay-submit lay-filter="layui-form-submit" id="submit-btn">保存</button>
                    {{isset($data) ? method_field('PUT') : ''}}
                    {{csrf_field()}}
                </div>
            </div>
        </div>
        </form>
    </div>
@endsection
@section('script')
    <script src="/js/ajax.js"></script>
    <script>
        layui.use(['formSelects','upload','tableSelect'], function(){
            var formSelects = layui.formSelects,
                tableSelect = layui.tableSelect,
                upload = layui.upload;


            formSelects.data('jump_url', 'local', {
                arr: @json(getJumUrlList())
            });
            formSelects.on('jump_url', function(id, vals, choice, isAdd, isDisabled){
                if(choice.hasOwnProperty('tableSelect') && choice.tableSelect == 'goodsList'){
                    $("#goods_id").trigger('click');
                }
                return true;
            });

            tableSelect.render({
                elem: '#goods_id',	//定义输入框input对象
                width: 1000,
                checkedKey: 'id',//表格的唯一建值，非常重要，影响到选中状态 必填
                searchKey: 'keywords',	//搜索输入框的name值 默认keyword
                searchPlaceholder: '商品全，简称称或ID',	//搜索输入框的提示文字 默认关键词搜索
                table: {	//定义表格参数，与LAYUI的TABLE模块一致，只是无需再定义表格elem
                    url:"{{route('bannerIndex.goodstable')}}",
                    method: "post",
                    cols: [[
                        {type:'radio'}
                        ,{field: 'photo', title: '商品图', align:'center', toolbar:'#photoTpl'}
                        ,{field: 'goods_name', title: '商品名称', width: 300}
                        ,{field: 'sku', title: '商品ID', align:'center'}
                        ,{field: 'title', title: '商品简称'}
                    ]]
                },
                done: function (elem, data) {
                    var NEWJSON = [];
                    layui.each(data.data, function (index, item) {
                        NEWJSON.push(item.title)
                        NEWJSON.push(item.id)
                    })
                    elem.val(NEWJSON.shift())
                    $('#goods_id').val(NEWJSON.pop());
                }
            });

            //普通图片上传
            upload.render({
                elem: '.banner-upload-btn'
                ,url: '{{route('activeBanner.update',['id' => $data->id ?? ''])}}'
                ,accept: 'images' //可选值有：images（图片）、file（所有文件）、video（视频）、audio（音频）
                ,acceptMime: 'image/*'
                ,exts: 'jpg|png|gif|bmp|jpeg' //允许上传的文件后缀。一般结合 accept 参数类设定。假设 accept 为 file 类型时，那么你设置 exts: 'zip|rar|7z' 即代表只允许上传压缩格式的文件。如果 accept 未设定，那么限制的就是图片的文件格式
                ,field: 'photo' //设定文件域的字段名
                ,size: 0 //设置文件最大可允许上传的大小，单位 KB。不支持ie8/9 0不限制
                ,multiple: false //是否允许多文件上传。设置 true即可开启。不支持ie8/9
                ,auto: false
                ,bindAction: '#save-btn'
                ,data: {
                    id: function(){
                        return $('input[name="id"]').val();
                    },
                    remark: function(){
                        return $('input[name="remark"]').val();
                    }
                    ,status: function(){
                        return $('input[name="status"]').val();
                    }
                    ,jump_url: function(){
                        return $('input[name="jump_url"]').val();
                    }
                    ,goods_id: function(){
                        return $('input[name="goods_id"]').val();
                    }
                    ,_method: function(){
                        return $('input[name="_method"]').val();
                    }
                }
                ,choose: function(obj){
                    var files = obj.pushFile();

                    var item = this.item;
                    //预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
                    obj.preview(function(index, file, result){
                        item.parents('.banner-show').find('img').attr('src',result);
                    });
                    $('#submit-btn').remove();
                    $('#save-btn').show();

                }
                ,done: function(res){
                    layer.msg(res.message);
                    return false;
                }
                ,error: function(){
                    layer.msg('保存失败');
                }
            });
        });


    </script>
    <script>
        $('.banner-show').on( 'mouseenter', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 60});
        });

        $('.banner-show').on( 'mouseleave', function() {
            $(this).find('.cmdlist-bottom').stop().animate({height: 0});
        });
    </script>
@endsection